import React from 'react'
import {Tabs,Select,Table, Divider, Tag,Modal,Button,message} from 'antd';
import './index.less';
import axios from 'axios';
import {PATH,IP} from '../../../../utils/urls';
import {createHashHistory} from 'history';
const { TabPane } = Tabs;
const { Option } = Select;

import BreadcrumbCustom from "../../../../components/BreadcrumbCustom";


export default class EquipmentMangager extends React.Component {
    columnsArray = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
        },{
            title: 'AppId',
            dataIndex: 'appId',
            key: 'appId',
        },{
            title: '类型',
            dataIndex: 'resouceTypeName',
            key: 'resouceTypeName',
        },{
            title: '名称',
            dataIndex: 'resouceName',
            key: 'resouceName',
        },{
            title: 'IP地址',
            dataIndex: 'resouceIp',
            key: 'resouceIp',
        },{
            title: '操作',
            key: 'tags',
            dataIndex: 'tags',
            render: (tags,data) => (
                <span>
            {tags.map((tag,index) => {
                if(index !=2){
                    return (
                        <span key={index}><a href="javascript:void(0);" onClick={this.actionClick.bind(this,{tag},{index},{data})}>{tag}</a>
                        <Divider type="vertical" /></span>
                    );
                }else{
                    return (
                        <span key={index}><a href="javascript:void(0);" onClick={this.actionClick.bind(this,{tag},{index},{data})}>{tag}</a></span>
                    );
                }
            })}
          </span>
            ),
        },
    ];
    constructor(props) {
        super(props);
        this.state = {
            selectPosition: '添加设备',
            tabsPostion:"1",//tabs选中索引
            hardWareArray:[],//硬件资源
            softWareArray:[],//软件资源
            selectOrButtonShow:true//当为ture：显示设备下拉列表，false:显示添加软件按钮
        };
    }

    /**
     * 设备select的切换事件
     * @param tabPosition
     */
    changeSelectPosition = selectPosition => {
        this.setState({ selectPosition:selectPosition });
        console.log(selectPosition);
        let path = {
            pathname:"addequipmentresource"
        }

        this.props.history.push(path);
    };

    componentDidMount() {
        //获取设备列表
        this.getHardWareResource();
    }

    /**
     * 获取设备列表
     * @returns
     */
    getHardWareResource() {
        axios.post(PATH.hardwareResource, {})
            .then(response => {
                if (response.data.code == 0) {
                    let dataArray = response.data.data;
                    console.log(response.data.data);
                    for(let i = 0;i<dataArray.length;i++){
                        dataArray[i].key = i;
                        //0和1为服务器、客户端，
                        if(dataArray[i].resouceType == 0 || dataArray[i].resouceType == 1){
                            dataArray[i].tags = ["修改信息","管理资源软件","删除"];
                        }else{
                            dataArray[i].tags = ["修改信息","参数设置","删除"];
                        }
                    }
                    console.log(dataArray);
                    this.setState({
                        hardWareArray:dataArray
                    })
                }
            });
    }

    /**
     * 点击操作功能
     * @returns {*}
     */
    actionClick = (props0,props1,props2) => {
        console.log(props0);
        console.log(props1);
        console.log(props2);
        let path = {
            state:{
                appId:props2.data.id,
                name:props2.data.resouceName,
                resouceType:props2.data.resouceType,
                props:props2
            },
        }
        console.log(path);
        localStorage.setItem("softIdCurrent",props2.data.id);
        switch (props1.index) {
            //修改信息
            case 0:
                //客户端和服务器
                if(props2.data.resouceType == 0 || props2.data.resouceType == 1){
                    path.pathname='/editequipmentresource';
                }else{//UPS、路由器、交换机
                    path.pathname='/addequipmentresource';
                }
                break;
            //管理软件资源或者参数设置
            case 1:
                if(props0.tag == "管理资源软件"){
                    path.pathname='/softwaremanager';
                }else if(props0.tag == "参数设置"){
                    path.pathname='/equipmentparamssetup';
                }
                break;
                //删除
            case 2:
                Modal.confirm({
                   title: "提示",
                   content: '是否确认删除？',
                   onOk:this.delectAreaSceneFun.bind(this,props0,props1,props2),
                   okText: '确认',
                   cancelText: '取消',
                });
                break;
            default:
                break;
        }
        this.props.history.push(path);
    }

    /**
     * 删除资源
     * @returns {*}
     */
    delectAreaSceneFun(props0,props1,props2){
        console.log(props2);
        axios.post(PATH.removeHareWareResource+"?ids="+props2.data.id,{

        },{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(response=>{
            console.log(response);
            if(response.data.code == 0){
                message.success(response.data.msg);
                //获取设备列表
                this.getHardWareResource();
            }else{
                message.error(response.data.msg);
            }
        })
    }

    /**
     * 添加软件资源
     * @returns {*}
     */
    addSoftWareResource = () => {
        console.log(123);
    }

    render() {
        return (
            <div>
                <BreadcrumbCustom first="配置配置" second="设备资源管理" />
                <div className="resourceAddType">
                    <div className="resourceManagerTitle">
                        <span className="equipmentSelect">设备资源管理</span>
                        <Divider type="vertical"/>
                        <span>软件资源管理</span>
                    </div>

                    <Select
                        value={this.state.selectPosition}
                        onChange={this.changeSelectPosition}
                        dropdownMatchSelectWidth={false}
                        style={{display:(this.state.selectOrButtonShow?"inline-block":"none")}}
                        className="resourceAddSelect"
                    >
                        <Option value="0">添加设备</Option>
                        <Option value="1">添加UPS</Option>
                        <Option value="2">添加路由器</Option>
                        <Option value="3">添加交换机</Option>
                    </Select>
                    <Button onClick={this.addSoftWareResource} style={{display:(this.state.selectOrButtonShow?"none":"inline-block")}}>添加软件资源</Button>
                </div>
                <Table className= "reasureManagerClass" columns={this.columnsArray} dataSource={this.state.hardWareArray} bordered />
            </div>
        )
    }
}